<template>
    <ul class="qsoft-select-box pos-re" @click="e_click">
        <li v-for="(v, i) in list" :key="i"
            class="qsoft-select-items cur animation"
            :class="{active: i === selectedi}"
            v-text="v.txt"
            :data-i="i"
            :data-v="v.value"
        ></li>
        <slot />
    </ul>
</template>

<script>
export default {
    props: {
        list: {
            default: []
        }
    },
    data() {
        return {
            selectedi: 0,
        }
    },
    created() {

    },
    methods: {
        e_click(event) {
            let t = event.target
            let i = t.dataset.i
            if (i === undefined) {return false}
            let v = t.dataset.v
            this.selectedi = Number(i)
            this.$emit('select', i, v)
        }
    }
}
</script>